import React from "react";
import './index.css'

function SearchBar(props) {
  return (
    <div className="searchBar">
      <input type="text" value={props.filterText} onChange={props.onFilterChange} placeholder="Search..." />
      <br />
      <label>
        <input type="checkbox" value={props.inStockOnly} onChange={props.onStockChange} />
        Only Show Products in Stock
      </label>
    </div>
  )
}

function ProductRow(props) {
  const listItems = props.data.map((item) => 
    <ul key={item.name} className="thingContent">
      <li>{item.name}</li>
      <li>{item.price}</li>
    </ul>
  )
  return (
    <div>
      {listItems}
    </div>
  )
}

function ProductTable(props) {
  // console.log('ProductTable', props.data);
  const items = props.data.map(item => 
    <div key={item.catTitle}>
      <h3>{item.catTitle}</h3>
      <ProductRow data={item.list} />
    </div>  
  )
  return (
    <div>
      <div>
        <ul className="thingContent">
          <li><b>Name</b></li>
          <li><b>Price</b></li>
        </ul>
        <div>{items}</div>
      </div>
    </div>
  )
}

class FilterableProductTable extends React.Component {
  constructor(props) {
    super(props);
    this.handleFilterChange = this.handleFilterChange.bind(this);
    this.handleStockChange = this.handleStockChange.bind(this);
    this.initData = this.initData.bind(this);
    this.state = {
      data: [
        {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
        {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
        {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
        {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
        {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
        {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
      ],
      filterText: '',
      inStockOnly: false,
    }
  }
  handleFilterChange(e) {
    this.setState({
      filterText: e.target.value,
    });
  }
  handleStockChange(e){
    this.setState({
      inStockOnly: e.target.checked,
    });
  }
  initData(filterText, inStockOnly) {
    const data = this.state.data.filter(item => {
      return filterText ?
      item.name.toLocaleLowerCase().indexOf(filterText.toLocaleLowerCase()) > -1 && item.stocked === inStockOnly :
      item && item.stocked === inStockOnly;
    });
    const newData = [];
    data.forEach(item => {
      const _index = newData.findIndex(cat => {
        return cat.catTitle === item.category;
      });
      if (_index === -1) {
        newData.push({
          catTitle: item.category,
          list: [item]
        })
      } else {
        newData[_index].list.push(item);
      }
    })
    return newData;
  }
  render() {
    const filterText = this.state.filterText;
    const inStockOnly = this.state.inStockOnly;
    return (
      <div>
        <SearchBar
          filterText={filterText}
          inStockOnly={inStockOnly}
          onFilterChange={this.handleFilterChange}
          onStockChange={this.handleStockChange}
        />
        <ProductTable
          filterText={filterText}
          inStockOnly={inStockOnly}
          data={this.initData(this.state.filterText, this.state.inStockOnly)}
        />
      </div>
    );
  }
}
export default FilterableProductTable;